<template>
  <div class="indexcontent">
    <div v-if="isMobile" class="mobilebox">
      <template v-if="prompt">
        <div class="zhezhao" v-show="prompt" @click.stop="prompt =false"></div>
        <img
          class="tishi"
          v-show="prompt"
          src="@/assets/img/tishi.png"
          alt
        />
      </template>
      <div class="containers" @scroll="handleScroll" ref="mobileCountent">
        <component-one
          :blockanimationtone="blockanimationtone"
          :text="text"
          :bgcolor="bgcolor"
          :flexbtn="flexbtn"
          @clickDownload="clickDownload"
        ></component-one>
        <component-two :blockanimation="blockanimation"></component-two>
        <component-three
          :blockanimationthree="blockanimationthree"
        ></component-three>
        <component-four
          :blockanimationtfour="blockanimationtfour"
        ></component-four>
        <component-five
          :blockanimationtfive="blockanimationtfive"
        ></component-five>
        <component-six></component-six>
      </div>
    </div>
    <div class="pc_box" v-else>
      <div class="containerbox">
        <div class="navbar">
          <div class="logo">
            <img src="@/assets/img/logo3.png" alt />
          </div>
          <span class="segmentation"></span>
          <div class="instructions">乐享杭城车主生活</div>
        </div>
        <div class="main">
          <div class="ban_img">
            <div class="leftcontent">
              <div
                :class="minheight ? 'left-circle' : 'left-circle-active'"
              ></div>
              <div class="toptext">湖心听</div>
              <div class="toptext" style="animation-delay: 5s">
                电台主播 实时互动
              </div>
              <div class="toptext" style="animation-delay: 10s">
                本地红人 畅聊杭城
              </div>
              <div class="toptext" style="animation-delay: 15s">
                结交朋友 因趣发声
              </div>
              <div class="toptext" style="animation-delay: 20s">
                精品商城 惊喜不停
              </div>
              <div :class="minheight ? 'centertext' : 'centertext-active'">
                乐享杭城车主生活
              </div>
              <div
                :class="minheight ? 'centertext' : 'centertext-active'"
                style="animation-delay: 5s"
              >
                来这里
                <br />不用排队，永不占线 <br />与电台主播即时互动
                <br />随时随地，想聊就聊
              </div>
              <div
                :class="minheight ? 'centertext' : 'centertext-active'"
                style="animation-delay: 10s"
              >
                权威专家、本地红人
                <br />带你看杭城大小事 <br />提前关注，精彩内容不再错过
              </div>
              <div
                :class="minheight ? 'centertext' : 'centertext-active'"
                style="animation-delay: 15s"
              >
                结交志同道合的朋友
                <br />为热爱与兴趣发声，记录生活
              </div>
              <div
                :class="minheight ? 'centertext' : 'centertext-active'"
                style="animation-delay: 20s"
              >
                品质车服，懂你所想
                <br />自驾出游，周周特价
              </div>
              <div :class="minheight ? 'download-box' : 'download-box-active'">
                <div class="btn-container">
                  <div class="download-iphonebtn">
                    <div class="iphoneimg"></div>
                    <div>
                      <p>App Store</p>
                      <p>下载</p>
                    </div>
                  </div>
                </div>
                <div class="iosdiv">
                  <div class="xz_icon"></div>
                  <p>扫码下载App</p>
                </div>
                <div class="btn-containerright">
                  <div class="download-anzhuobtn">
                    <div class="anzhuoimg"></div>
                    <div>
                      <p>Android</p>
                      <p>下载</p>
                    </div>
                  </div>
                </div>
                <div class="anddiv">
                  <div class="xz_icon"></div>
                  <p>扫码下载App</p>
                </div>
              </div>
              <div class="footer">
                Copyright © 2021 湖心听. All Rights Reserved.
                <br />浙ICP备19002518号-1 | 浙公网安备 33010802010423号
              </div>
            </div>
            <div class="rightcontent around_box">
              <div class="firstbanner_content around_box">
                <b class="boy"></b>
                <b class="girl"></b>
                <b class="zw_icon"></b>
                <b class="pz_icon"></b>
                <b class="zb_icon"></b>
              </div>
              <div class="phone">
                <b></b>
              </div>
              <div class="music_box">
                <div :class="['music']">
                  <b></b>
                </div>
              </div>
              <div class="listenicon_box">
                <div class="listenicon">
                  <b></b>
                </div>
              </div>
              <div class="yellow_box">
                <div class="yellow_o">
                  <b></b>
                </div>
              </div>
              <div class="mkf_box">
                <div class="mkf">
                  <b
                    :style="{ backgroundImage: 'url(' + coverImgUrl + ')' }"
                  ></b>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="stage-icons">
          <span
            v-for="(item, i) in imgArr"
            :key="i"
            :class="indexpc == i ? 'current_active' : 'current_item'"
          ></span>
        </div>
        <footer></footer>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @description [throttle 节流函数]
 * @author shanshuizinong
 * @param {Function} fn 延时调用函数
 * @param {Number} delay 延迟多长时间
 * @param {Number} atleast 至少多长时间触发一次
 * @return {Function} 延迟执行的方法
 */
const throttle = (fn, delay, atleast) => {
  let timer = null;
  let previous = null;
  return function () {
    let now = +new Date();
    if (!previous) previous = now;
    if (atleast && now - previous > atleast) {
      fn();
      previous = now;
      clearTimeout(timer);
    } else {
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn();
        previous = null;
      }, delay);
    }
  };
};
import componentOne from "@/components/componentOne.vue";
import componentTwo from "@/components/componentTwo.vue";
import componentThree from "@/components/componentThree.vue";
import componentFour from "@/components/componentFour.vue";
import componentFive from "@/components/componentFive.vue";
import componentSix from "@/components/componentSix.vue";
export default {
  name: "HelloWorld",
  components: {
    componentOne,
    componentTwo,
    componentThree,
    componentFour,
    componentFive,
    componentSix,
  },
  data() {
    return {
      prompt:false,
      minheight: true,
      text: "",
      initTop: 0,
      handleScroll: () => {},
      bgcolor: "#040507",
      isMobile: false,
      flexbtn: false, //判断是否加投影
      blockanimationtone: true,
      blockanimation: false,
      blockanimationthree: false,
      blockanimationtfour: false,
      blockanimationtfive: false,
      imgArr: ["1", "2", "3", "4", "5"],
      indexpc: 0,
      coverImgUrl: require("../../src/assets/img/yun_icon.png"),
    };
  },
  created() {
    let heightb = document.documentElement.clientHeight;
    if (heightb < 666) {
      this.minheight = false;
    }
    /*判断终端*/
    let u = navigator.userAgent;
    let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    this.browserRedirect(isAndroid, isIOS);
    let pmMaxwidth = window.screen.width;
    if (pmMaxwidth <= 750 && pmMaxwidth >= 320) {
      this.isMobile = true;
    } else {
      window.setInterval(this.next, 5000);
      this.isMobile = false;
    }
  },
  mounted() {
    this.handleScroll = throttle(
      () => {
        const containers = this.$refs.mobileCountent;
        let top = containers.scrollTop;
        if (top > this.initTop) {
          if (top > 220 && top <= 900) {
            this.blockanimation = true;
            this.flexbtn = true;
          } else if (top > 900 && top <= 1824) {
            this.blockanimationthree = true;
            this.flexbtn = true;
          } else if (top > 1824 && top <= 2636) {
            this.blockanimationtfour = true;
            this.flexbtn = true;
          } else if (top > 2636 && top <= 3448) {
            this.blockanimationtfive = true;
            this.flexbtn = true;
          } else if (top > 145 && top <= 220) {
            this.flexbtn = true;
          } else {
            this.blockanimationtone = true;
          }
          this.initTop = top;
        } else if (top < this.initTop) {
          console.log(top);
          if (top < 144) {
            this.flexbtn = false;
          } else if (top < 3390) {
            this.flexbtn = true;
          }
        }
        this.initTop = top;
      },
      100,
      300
    );
  },
  methods: {
    clickDownload(val){
      this.prompt =val;
    },
    browserRedirect(isAndroid, isIOS) {
      var sUserAgent = navigator.userAgent.toLowerCase();
      let isweixin = sUserAgent.match(/MicroMessenger/i)=="micromessenger"
      if (
        /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(
          sUserAgent
        )
      ) {
        if (isIOS) {
          this.text = "App Store";
          this.bgcolor = "#040507";
          return true;
        } else if (isAndroid) {
          this.text = "Android";
          this.bgcolor = "#3ddb86";          
          console.log("是android");
          return true;
        } else {
          console.log("请在App内打开");
          return false;
        }
      }
    },
    next: function () {
      if (this.indexpc < this.imgArr.length - 1) {
        this.indexpc++;
      } else {
        this.indexpc = 0; //循环到第1图
      }
      let index = this.indexpc;
      let _this = this;
      switch (index) {
        case 0:
          _this.coverImgUrl = require("../../src/assets/img/yun_icon.png");
          break;
        case 1:
          _this.coverImgUrl = require("../../src/assets/img/mkf.png");
          break;
        case 2:
          _this.coverImgUrl = require("../../src/assets/img/wave.png");
          break;
        case 3:
          _this.coverImgUrl = require("../../src/assets/img/chat.png");
          break;
        default:
          _this.coverImgUrl = require("../../src/assets/img/shoppingicon.png");
          break;
      }
    },
  },
};
</script>

<style scoped>
.containers {
  height: 100vh;
  overflow-y: scroll;
}
.tishi{
  position: absolute;
  right: 28px;
  top: 10px;
  bottom: 0;
  width:222px;
  height: 104.5px;
  z-index: 9999;
}
.zhezhao{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0.5;
  z-index: 9998;
}
</style>
